<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="submitForm"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="名称" :labelCol="textareaLabelCol" :wrapperCol="textareaWrapperCol" prop="name">
                <a-input v-model="model.name" placeholder="系统根据属性自动生成"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <a-form-model-item label="物料编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
                <a-input v-model="model.code" placeholder="请输入物料编号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="17">
              <a-form-model-item
                label="物料种类"
                :labelCol="{ xs: { span: 24 }, sm: { span: 3 }, style: 'width: 10%;' }"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
                prop="categoryName"
              >
                <a-row :gutter="5">
                  <a-col :span="6">
                    <a-input v-model="model.categoryNo" disabled placeholder="种类编号"></a-input>
                  </a-col>
                  <a-col :span="17">
                    <j-select-goods-category
                      ref="selectGoodsCategory"
                      v-model="model.categoryName"
                      @onGoodsCategorySelected="onGoodsCategorySelected"
                    />
                  </a-col>
                </a-row>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="品牌/标识" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="brand">
                <a-input v-model="model.brand" @blur="nameChange" placeholder="请输入品牌/标识"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="品名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="itemName">
                <a-row :gutter="5">
                  <a-col :span="12">
                    <a-input v-model="model.itemName" @blur="nameChange" placeholder="请输入品名"></a-input>
                  </a-col>
                  <a-col :span="12">
                    <j-dict-select-tag
                      type="list"
                      v-model="model.itemName"
                      dictCode="tsl_item_name"
                      @change="nameChange"
                      placeholder="请选择"
                    />
                  </a-col>
                </a-row>
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="香型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="flavor">
                <a-input v-model="model.flavor" @blur="nameChange" placeholder="请输入香型"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item
                label="袋型(包材种类)"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="packageCategory"
              >
                <j-dict-select-tag
                  type="list"
                  v-model="model.packageCategory"
                  dictCode="bc_type"
                  placeholder="请选择包材种类"
                  @change="nameChange"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="规格型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="noneSpec">
                <a-input v-model="model.noneSpec" @blur="noneSpecChange" placeholder="xxxKG*数字格式填写"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="包装方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="packageType">
                <a-input v-model="model.packageType" placeholder="请输入包装方式"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="计量单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="meUnit">
                <j-dict-select-tag type="list" v-model="model.meUnit" dictCode="ji_unit" placeholder="请选择计量单位" />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="辅助计量单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="auUnit">
                <j-dict-select-tag
                  type="list"
                  v-model="model.auUnit"
                  dictCode="zl_unit"
                  placeholder="请选择辅助计量单位"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="颜色" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="background">
                <a-input v-model="model.background" placeholder="请输入颜色"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="尺寸" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="size">
                <a-input v-model="model.size" placeholder="请输入尺寸"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="材质" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialQuality">
                <a-input v-model="model.materialQuality" placeholder="请输入材质"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="比例数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proportion">
                <a-input type="number" v-model="model.proportion" placeholder="请输入比例数量"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="安全库存" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="stockQuantity">
                <a-input-number
                  v-model="model.stockQuantity"
                  :min="0"
                  placeholder="请输入安全库存"
                  style="width: 100%"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="所属仓库" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="warehouseName">
                <erp-warehouse
                  ref="erpWarehouse"
                  v-model="model.warehouseName"
                  @onWarehouseSelected="onWarehouseSelected"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="是否领料" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isUse">
                <j-dict-select-tag type="list" v-model="model.isUse" dictCode="yes_no" placeholder="请选择是否领料" />
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="客户物料编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customCode">
                <a-input v-model="model.customCode" placeholder="请输入客户物料编号"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item
                label="客户物料类型"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="customGoodsType"
              >
                <a-input v-model="model.customGoodsType" placeholder="请输入客户物料类型"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item
                label="供应商要求名称"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="supplierRequireName"
              >
                <a-input v-model="model.supplierRequireName" placeholder="请输入供应商要求名称"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="保质期（天）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="qualityDays">
                <a-input v-model="model.qualityDays" placeholder="保质期（天）"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="在途天数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="onRoadDays">
                <a-input v-model="model.onRoadDays" placeholder="在途天数"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item
                label="库存数量"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="inventoryQuantity"
              >
                <a-input-number v-model="model.inventoryQuantity" placeholder="请输入库存数量" style="width: 100%" />
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="是否启用" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="useStatus">
                <j-dict-select-tag
                  type="list"
                  v-model="model.useStatus"
                  dictCode="erp_status"
                  placeholder="请选择是否启用"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="是否公用" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isPublic">
                <j-dict-select-tag
                  type="list"
                  v-model="model.isPublic"
                  dictCode="yes_no"
                  placeholder="请选择是否公用"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="所属人员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="belongUser">
                <a-row :gutter="4">
                  <a-col :span="18">
                    <a-input v-model="model.belongUser" placeholder="请选择所属人员"></a-input>
                  </a-col>

                  <a-col :span="6">
                    <a-button @click="handleSelectEmployee" type="primary" :loading="confirmLoading">选择员工</a-button>
                  </a-col>
                </a-row>
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="以前的订单" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="historyOrder">
                <a-input v-model="model.historyOrder" disable></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-form-model-item
              label="包装要求"
              :labelCol="textareaLabelCol"
              :wrapperCol="textareaWrapperCol"
              prop="packRequire"
            >
              <a-textarea v-model="model.packRequire" rows="4" placeholder="请输入备注" />
            </a-form-model-item>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-model-item
                label="备注"
                :labelCol="textareaLabelCol"
                :wrapperCol="textareaWrapperCol"
                prop="remark"
              >
                <a-textarea v-model="model.remark" rows="2" placeholder="请输入备注" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
      <employee-list-modal ref="selectEmployee" @handlerOk="handleSelectEmployeeOk" />
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import { putAction } from '@api/manage'
import { getAction } from '@api/manage'
import ErpGoodsListModel from '@comp/base/modal/ErpGoodsListModal'
import EmployeeListModal from '@/components/tsl/modules/EmployeeListModal.vue'

export default {
  name: 'ErpGoodsPackageModal',
  components: {
    ErpGoodsListModel,
    EmployeeListModal,
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      switchValue: false,
      title: '新增包材',
      width: 1250,
      visible: false,
      disableSubmit: false,
      modalWidth: 1250,
      category: '2',
      tabkeys: ['material', 'uphistorys'],
      model: {},

      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
        style: 'width: 30%;',
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      textareaLabelCol: {
        xs: { span: 12 },
        sm: { span: 2 },
      },
      textareaWrapperCol: {
        xs: { span: 40 },
        sm: { span: 21 },
      },
      confirmLoading: false,
      validatorRules: {
        code: [{ required: true, message: '请输入编号!' }],
        // name: [{ required: true, message: '请输入名称!',trigger:'blur' }],
        noneSpec: [{ required: true, message: '请输入规格!' }],
        categoryName: [{ required: true, message: '请输入物料种类!' }],
        meUnit: [{ required: true, message: '请输入计量单位!' }],
        auUnit: [{ required: false, message: '请输入辅助单位!' }],
        useStatus: [{ required: true, message: '请输入状态!' }],
        classificationId: [{ required: true, message: '请输入物料分类!' }],
        stockQuantity: [{ required: false, message: '请输入安全库量!' }],
        warehouseCode: [{ required: true, message: '请输入所属仓库!' }],
        isPublic: [{ required: false, message: '请输入是否公用!' }],
        isUse: [{ required: false, message: '请输入是否领料!' }],
      },
      url: {
        add: '/base/erpGoods/add',
        edit: '/base/erpGoods/edit',
        queryById: '/base/erpGoods/queryById',
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    reset() {
      this.model = {
        id: '',
        code: '',
        categoryName: '',
        categoryNo: '',
        useStatus: 1,
        isUse: 1,
        isPublic: 1,
        isAssBc: 1,
        isPattern: 1,
        noneSpec: '',
        packSpec: 0,
        meUnit: '',
        auUnit: '',
        customCode: '',
        coRate: 0,
        barCode: '',
        formulaNo: '',
        belongUser: '',
        packageType: '',
        onRoadDays: '',
        size: '',
        materialQuality: '',
        packRequire: '',
        packageCategory: '',
        warehouseCode: '',
        warehouseName: '',
        brand: '',
        itemName: '',
        flavor: '',
        proportion: 1,
        background: '',
      }
    },
    onGoodsCategorySelected(rows) {
      this.model.categoryName = rows.name
      this.model.categoryNo = rows.code
    },
    handleCancel() {
      this.visible = false
    },
    nameChange() {
      let name = this.model.brand ? this.model.brand : ''
      if (this.model.itemName) {
        name += this.model.itemName
      }
      if (this.model.flavor) {
        name += this.model.flavor
      }
      if (this.model.packageCategory) {
        name += this.model.packageCategory
      }
      if (this.model.noneSpec) {
        name += this.model.noneSpec
      }
      this.model.name = name
      this.$forceUpdate()
    },
    getGoodsCode() {
      console.log('getGoodsCode')
      let url = '/sys/fillRule/executeRuleByCode/material_code'
      let param = { inputCharacter: 'B' }
      putAction(url, param).then((res) => {
        // 执行成功，获取返回的值，并赋到页面上
        if (res.success) {
          this.model.code = res.result
        }
      })
    },
    //选择员工方法
    handleSelectEmployeeOk(data) {
      console.log('选择员工：', data)
      if (data) {
        this.model.belongUser = data.employeeName
      }
    },
    //绑定所属员工
    handleSelectEmployee() {
      this.$refs.selectEmployee.visible = true
    },
    //计算转换率
    noneSpecChange() {
      this.model.coRate = 1
      this.model.packSpec = 1
      this.nameChange()
    },
    onWarehouseSelected(rows) {
      this.model.warehouseCode = rows.code
      this.model.warehouseName = rows.name
    },
    onSelectChange() {},
    onSelectRow() {},
    add() {
      this.reset()
      this.getGoodsCode()
      this.visible = true
    },
    edit(record) {
      this.reset()
      getAction(this.url.queryById, { id: record.packageId }).then((res) => {
        this.model = res.result
        console.log('编辑包材', this.model)
        this.visible = true
      })
    },
    submitForm() {
      const that = this
      console.log('新增包材：', this.model)
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        console.log('验证结果：', valid)
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          let isAdd = false
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
            isAdd = true
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                if (isAdd) {
                  that.$message.success('添加包材成功！')
                  that.model.id = res.message
                  that.$emit('goodsOk', [that.model.id])
                } else {
                  that.$message.success('修改包材成功！')
                  that.$emit('updateOk')
                }
                that.visible = false
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    filterPackageId(packageId) {
      this.model.erpGoodsPackageList = this.model.erpGoodsPackageList.filter(function (item) {
        return item.packageId !== packageId
      })
    },
    addMaterielPackage: function () {
      this.$nextTick(() => {
        this.$refs.selectGoodsList.add()
      })
    },
    onDelete(key) {
      const dataSource = [...this.model.erpGoodsPackageList]
      this.model.erpGoodsPackageList = dataSource.filter((item) => item.packageId !== key)
      // deleteAction('base/erpGoodsFormulaDetail/delete',{id:key}).then(res=>{
      //   if(res.success){
      //
      //   }
      // })
    },
    copy(record) {
      console.log(record)
      this.model = Object.assign({}, record)
      this.model.id = undefined
      this.model.code = ''
    },
  },
}
</script>
